<template>
  <div class="projectTime">
    <p class="navigation">
      <span @click="historyGo">当前项目</span>
      > 查看工时
    </p>

    <div class="tatleFalg">
      <p>项目名称：{{ manHourInfo.projectName }}</p>
      <p>总工时：{{ manHourInfo.totalDay }}天</p>
      <p class="projectFalg">
        <span>项目状态：</span>
        <el-steps :active="activeTitle" align-center finish-status="success">
          <el-step v-for="(item, index) in optionsStatic" :key="index" :title="item.title"
            :description="item.description"></el-step>
        </el-steps>
      </p>
    </div>

    <div style="margin: 20px 0px">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-date-picker size="small" v-model="timeList" type="daterange" range-separator="至" start-placeholder="开始日期"
            value-format="yyyy-MM-dd" end-placeholder="结束日期" align="right"></el-date-picker>
          <el-checkbox v-model="weekType" label="周末工时" size="large" :true-label="1" :false-label="0" />
        </el-col>
        <el-col :span="1">
          <el-button type="primary" size="small" @click="todoSearch">查询</el-button>
        </el-col>
        <el-col :span="14">
          <div style="line-height: 32px;">
            <span class="working-hours">当前总计：<span class="hours-num">{{
              workhours
            }}</span>天</span>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="success" size="small" @click="exportWorkHours">导出工时</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table border tooltip-effect="dark" :header-cell-style="{ background: '#F9F9F9' }" :data="option"
      highlight-current-row v-loading="tableLoading" show-summary :summary-method="getSummaries" style="width: auto">
      <el-table-column v-if="countList.length != 0" prop="date" align="center" label="时间"></el-table-column>
      <el-table-column v-if="countList.length != 0" v-for="(item, index) in countList" v-show="item.name" :key="index"
        :prop="item.name" align="center" :label="item.name"></el-table-column>
    </el-table>
    <el-pagination v-if="countList.length != 0" style="text-align: right" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="10"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { workingHoursList, exportWorkingHours } from "@/service/Api.js"; //接口
import XLSX from "xlsx";
export default {
  components: {},
  name: "projectMent",
  props: ["projectid","pn3"],
  data() {
    return {
      optionsStatic: [
        { id: 1, title: "立项", description: "" },
        { id: 2, title: "需求分析", description: "" },
        { id: 3, title: "编码实现", description: "" },
        { id: 4, title: "内部测试", description: "" },
        { id: 5, title: "线上测试", description: "" },
        { id: 6, title: "上线试运行", description: "" },
        { id: 7, title: "已交付", description: "" },
        { id: 8, title: "项目取消", description: "" },
        { id: 9, title: "项目关闭", description: "" },
      ],
      pn: 1,
      ps: 10,
      count: 0,
      tableLoading: false,
      manHourInfo: "",
      manHourOption: [],
      total: 0,
      option: [],
      activeTitle: 0,
      countList: [],
      timeList: [],
      startDate: "",
      endDate: "",
      workhours: 0, //工时多少天
      weekType: 0,
    };
  },
  created() { },
  mounted() {
    this.dataList();
  },
  beforeDestroy() { },
  methods: {
    dataList() {
      this.workhours = 0;
      let data = {
        pn: this.pn,
        ps: this.ps,
        projectId: this.projectid,
        startDate: this.startDate,
        endDate: this.endDate,
        weekType: this.weekType
      };
      workingHoursList(data).then((res) => {
        if (res.code == 0) {
          this.total = res.data.pag.total;
          this.manHourInfo = res.data;
          console.log("this.manHourInfo",this.manHourInfo);
          this.countList = res.data.columns; //人员总工时
          this.manHourOption = res.data.pag.records; //工时数组
          this.optionsStatic.forEach((element) => {
            this.manHourInfo.projectStatusList.forEach(j => {
              if (element.title == j.content) {
                element.description = j.createTime
              }
            })
            if (element.title == this.manHourInfo.projectStatus) {
              this.activeTitle = element.id - 1;
              return;
            }
          });
          console.log();
          // 工时天数
          if (this.countList.length > 0) {
            const sum = this.countList
              .map((a) => a.count)
              .reduce((prev, next) => (Number(prev) + Number(next)).toFixed(2));
            console.log(this.countList, "sum", sum);
            this.workhours = sum;
          } else {
            this.workhours = 0;
          }

          const arr = [];
          this.manHourOption.forEach((item) => {
            arr.push({
              date: item.date,
              ...item.userAndTime,
            });
          });
          this.option = arr;
        }
      });
    },
    historyGo() {
      this.$emit("subset", {
        falg: sessionStorage.getItem("showFlag")
          ? sessionStorage.getItem("showFlag")
          : 11,pn3 : this.pn3
      });
    },
    todoSearch() {
      if (this.timeList && this.timeList.length > 0) {
        this.startDate = this.timeList[0];
        this.endDate = this.timeList[1];
      } else {
        this.startDate = "";
        this.end = "";
      }
      this.pn = 1;
      this.dataList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.dataList();
    },
    handleCurrentChange(val) {
      this.pn = val;
      this.dataList();
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        } else {
          sums[index] = this.countList[index - 1].count;
        }
      });
      return sums;
    },

    exportWorkHours() {
      let data = {
        projectId: this.projectid,
        startDate: this.startDate,
        endDate: this.endDate,
        weekType: this.weekType
      }
      exportWorkingHours(data).then(res => {
        let blob = new Blob([res], {
          // type: "application/vnd.ms-excel;charset=UTF-8",
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
        });
        let url = window.URL.createObjectURL(blob);
        const link = document.createElement("a"); // 创建a标签
        link.setAttribute('download', new Date().getTime() + '.xlsx')
        document.body.appendChild(link)
        link.download = "项目工时表"
        link.href = url;
        link.click();
        URL.revokeObjectURL(url); // 释放内存
      })
    },
  },
};
</script>

<style scoped>
.navigation {
  background: #f0f9eb;
  color: #67c23a;
  padding: 10px;
  margin: 0;
}

.projectTime {
  width: calc(100% - 30px);
}

.navigation span {
  cursor: pointer;
  font-weight: bold;
}

.tatleFalg {
  padding: 0 10px;
  border: 1px solid #ccc;
}

.tatleFalg .projectFalg {
  display: flex;
}

.tatleFalg .projectFalg span {
  width: 80px;
}

.el-steps--horizontal {
  width: calc(100% - 80px);
}

.working-hours {
  margin-left: 10px;
}

.hours-num {
  color: #009f6d;
}
</style>
